<template>
  <div>
    <div class="videos">
      <video :src="vilist.url" controls></video>
      <div class="return" @click="abc">
        <img src="../../assets/Search/41.png" alt="" />
      </div>
    </div>

    <div class="various">
      <ul class="taop">
        <li
          v-for="(item, index) in tabTitle"
          :key="index"
          @click="num = index"
          :class="{ con: num == index }"
        >
          {{ item }}
        </li>
      </ul>

      <div :class="['content', { con: num == 0 }]">
        <div class="means">
          <h3>{{ x1list.name }}</h3>
          <!-- <div class="xqmeans"></div> -->
        </div>

        <div class="times">
          <li>
            <img src="../../assets/Search/21.png" alt="" />
            <span>{{ x1list.playCount | playCountNum }}</span>
          </li>
          <li>
            <span>{{ x1list.publishTime }}</span>
          </li>
          <div class="function">
            <ul>
              <!-- 点赞 -->
              <li @click="give" v-show="true == isgive">
                <img src="../../assets/Search/20.png" />
              </li>
              <li @click="Give" v-show="true != isgive">
                <img src="../../assets/Search/44.png" />
              </li>
              <!-- 喜欢 -->
              <li @click="Edit" v-show="true == isEdit">
                <img src="../../assets/Search/42.png" />
              </li>
              <li @click="edit" v-show="true != isEdit">
                <img src="../../assets/Search/15.png" />
              </li>
            </ul>
          </div>
        </div>

        <div class="relevant">
          <span>相关视频:</span>
          <ul>
            <li
              v-for="(item, index) in relelist"
              :key="index"
              @click="again(item.id)"
            >
              <img :src="item.cover" />
              <div class="vant">
                <span>{{ item.name }}</span>
                <span>{{ item.artistName }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div :class="['content', { con: num == 1 }]">
      
        <div class="marvellous">
          <h3>全部评论({{ comlist.length }})：</h3>
          <ul>
            <li v-for="(item, index) in comlist" :key="index">
              <div class="ousleft">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="ousright">
                <li>{{ item.user.nickname }}</li>
                <li>{{ item.time | formatDate }}</li>
                <li>{{ item.content }}</li>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMvUrl, getMvdata, getMvrelevant, getMvcomment } from "../../api/mv.js";
export default {
  data() {
    return {
      vilist: [],
      x1list: [],
      relelist: [],
      comlist: [],
      num: 0,
      tabTitle: ["详情", "评论"],
      isEdit: true, //喜欢
      isgive: true, //点赞
      fals:null,
    };
  },
  methods: {
    Edit() {
      this.isEdit = false;
    },
    edit() {
      this.isEdit = true;
    },
    give() {
      this.isgive = false;
    },
    Give() {
      this.isgive = true;
    },
    abc() {
      this.$router.go(-1);
    },
    again(id) {
      this.$router.push({ name: "getinto", query: { userId: id } });
    },
    FungetMvUrl() {
      getMvUrl({ id: this.$route.query.userId }).then((data) => {
        if (data.code == 200) {
          this.vilist = data.data;
          console.log(this.vilist);
        }
      });
    },
    FungetMvdata() {
      getMvdata({ mvid: this.$route.query.userId }).then((data) => {
        if (data.code == 200) {
          this.x1list = data.data;
          console.log(this.x1list);
        }
      });
    },
    FungetMvrelevant() {
      getMvrelevant({ mvid: this.$route.query.userId }).then((data) => {
        if (data.code == 200) {
          this.relelist = data.mvs;
          console.log(this.relelist);
        }
      });
    },

    FungetMvcomment() {
      getMvcomment({ id: this.$route.query.userId }).then((data) => {
        if (data.code == 200) {
          this.comlist = data.hotComments;
          // console.log(this.comlist);
        }
      });
    },
  },
  created() {
    this.FungetMvUrl();
    this.FungetMvdata();
    this.FungetMvrelevant();
    this.FungetMvcomment();
    this.$nextTick(() => {
      this.$parent.getPlayerId(this.fals);
    });
  },
  filters: {
    playCountNum(value) {
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      // return y + "-" + MM + "-" + d;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
  watch: {
    $route() {
      this.FungetMvUrl();
      this.FungetMvdata();
      this.FungetMvrelevant();
      this.FungetMvcomment();
    },
  },
};
</script>

<style lang="less">
.videos {
  width: 100%;
  height: 210px;
  position: relative;
  video {
    width: 100%;
    height: 100%;
  }
  .return {
    // z-index: 9999;
    width: 10%;
    height: 35px;
    box-sizing: border-box;
    background: rgba(245, 245, 245, 0.5);
    padding-top: 7px;
    padding-left: 7px;
    position: absolute;
    border-radius: 50%;
    top: 5px;
    left: 5px;
    img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
}

.various {
  width: 100%;
  .taop {
    height: 40px;
    width: 100%;
    margin-top: 5px;
    li {
      width: 50%;
      height: 40px;
      float: left;
      line-height: 40px;
      text-align: center;
      &.con {
        font-weight: bold;
        color: white;
        // border-radius: 30px;
        background: rgba(235, 26, 0, 0.8);
      }
    }
  }
  .content {
    width: 100%;
    display: none;
  }
  .content.con {
    display: block;
  }
}

.content {
  .times {
    height: 50px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    li {
      width: 30%;
      display: flex;
      justify-content: end;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      span {
        font-size: 13px;
        color: gray;
      }
    }
    .function {
      width: 40%;
      height: 50px;
      box-sizing: border-box;
      // padding: 5px 10px 5px 10px;
      padding-top: 10px;
      ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        li {
          width: 50%;
          box-sizing: border-box;
          padding-top: 5px;
          padding-left: 15px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            display: inline-block;
          }
        }
      }
    }
  }
  .means {
    width: 100%;
    // height: 90px;
    box-sizing: border-box;
    padding: 5px 10px 5px 10px;
    h3 {
      font-size: 13px;
      // color: gray;
    }
  }

  .relevant {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    span {
      font-size: 17px;
      width: 100%;
    }
    ul {
      width: 100%;
      margin-top: 10px;
      li {
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding-bottom: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid gray;
        display: flex;
        justify-content: space-between;
        // border-radius: 10px;
        // align-items: center;
        img {
          width: 30%;
          height: 100%;
          border-radius: 10px;
        }
        .vant {
          width: 65%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: baseline;
          span:nth-child(1) {
            display: inline-block;
            width: 95%;
            overflow: hidden;
            white-space: nowrap;
            font-size: 9px;
            height: 50%;
          }
          span:nth-child(2) {
            display: inline-block;
            width: 100%;
            height: 50%;
            font-size: 9px;
            color: gray;
          }
        }
      }
    }
  }
  .marvellous {
    width: 100%;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    h3 {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    ul {
      width: 100%;
      li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        // margin-bottom: 20px;
        .ousleft {
          width: 9%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: burlywood;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .ousright {
          width: 90%;
          height: auto;
          padding-left: 10px;
          li:nth-child(1) {
            height: 20px;
            line-height: 20px;
          }
          li:nth-child(2) {
            font-size: 9px;
            color: gray;
          }
          li:nth-child(3) {
            font-size: 9px;
            color: gray;
            margin-top: 5px;
            margin-bottom: 15px;
          }
        }
      }
    }
  }
  
}
</style>